<template>
  <div class="order">
    <div class="top">
      <el-form  label-width="80px">

        <el-form-item label="订单号">
          <el-input v-model="orderSn" placeholder="订单号"></el-input>
        </el-form-item>

        <el-form-item label="收货人">
          <el-input v-model="consignee" placeholder="收货人"></el-input>
        </el-form-item>
        <el-button type="primary" @click="queryFn">查询</el-button>
      </el-form>
    </div>
    <div class="table">
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        >
      </el-table-column>
      <el-table-column
        prop="order_sn"
        label="订单号"
        >
      </el-table-column>
      <el-table-column
        prop="add_time"
        label="下单时间">
      </el-table-column>
      <el-table-column
        prop="consignee"
        label="收货人">
      </el-table-column>
      <el-table-column
        prop="order_price"
        label="订单金额">
      </el-table-column>
      <el-table-column
        prop="order_status_text"
        label="订单状态">
      </el-table-column>
    </el-table>
    </div>

    <div class="footer">
      <GoodsFooter @fn="changePageFn" @fn2="changeSizeFn" :total="total" :pageSizes="pageSizes" :currentPage4="currentPage"/>
    </div>
  </div>
</template>

<script>
const {getOrderLists} = require("../../../request/httpApi")
import GoodsFooter from "../../good/GoodsFooter.vue"
export default {
  components:{
    GoodsFooter
  },
  data() {
    return {
      tableData:[], //表格的数据
      orderSn:'',//订单号
      consignee:'',  //收货人
      page:1,
      size:10,
      total:0,
      pageSizes:10,
      currentPage:1
    };
  },
  created(){
    //初次加载 渲染页面
    this.getOrderListsFn()
  },
  methods:{
    //数据请求的封装
    getOrderListsFn(){
         getOrderLists({
      page:this.page,
      size:this.size,
      orderSn:this.orderSn,   //订单号
      consignee:this.consignee,  //收货人
    }).then( res => {
      // console.log(res.data);
      let {count,pageSize,currentPage,data} = res.data
      this.tableData = data
      this.total = count
      this.currentPage=currentPage
      this.pageSize=pageSize

    })
    },
    //子传父的数据  点击分页 修改数据 发送渲染请求
    changePageFn(val){
      this.page = val
       this.getOrderListsFn()
    },
    changeSizeFn(val){
      this.size = val
       this.getOrderListsFn()
    },
    //点击查询的事件按钮
    queryFn(){
      if(this.consignee.trim()==='' && this.orderSn.trim()===''){
        this.$message.error("至少填写一项")
        return
      }else{
        this.getOrderListsFn()
         
      }
      
    }
  }
};
</script>

<style lang="less">
.order {
  padding: 10px;
  background-color: #fff;

  .top{
      .el-input__inner {
    width: 200px;
        height: 32px;
    line-height: 32px;
  }
  .el-form-item {
    margin-bottom: 11px;

    .el-form-item__label{
      width: 60px !important;
    }
    .el-form-item__content{
      margin-left:60px !important;
    }
  }
  }

  .el-form{
      display: flex;

      .el-button{
          width: 56px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 5px 0 0 10px;
      }
  }
}
</style>